<template>
  <view class="cards-container">
    <!-- 根据 status 渲染不同的卡片组件 -->
    <template v-for="(video, index) in videosPull" >
      <FreeCard v-if="video.status === 1" :video="video" />
      <PaidCard v-else-if="video.status === 2" :video="video" />
    </template>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import FreeCard from './push_card.vue'; // 免费课程卡片组件
import PaidCard from './push_card_pay.vue'; // 付费课程卡片组件

export default {
  components: {
    FreeCard,
    PaidCard
  },
  data() {
    return {
      videosPull: [] // 用于存储深复制后的 videosPull 数据
    };
  },
  created() {
    // 在组件创建时进行深复制
    this.videosPull = JSON.parse(JSON.stringify(this.$store.state.videosPull));
  }
};
</script>

<style scoped>
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
}
</style>
